<template>
    <div class="content">
        <div class="date-time">
            <div class="left" @click="isShowTimePicker = true">
                <p class="start-time">{{ formatTime(startTime) }}</p>
                <u-icon
                    name="arrow-down"
                    color="#979797"
                    size="16rpx"
                    style="padding-top: 4rpx"
                ></u-icon>
            </div>
            <div class="center">
                <div class="line"></div>
                <div class="long">
                    <span v-if="usableCycleDay > 0">{{ usableCycleDay }}天</span
                    ><span v-if="usableCycleHour > 0">{{ usableCycleHour }}时</span>
                </div>
                <div class="line"></div>
            </div>
            <div class="right">
                <p class="end-time">{{ formatTime(endTime) }}</p>
            </div>
        </div>
        <div class="space-list">
            <u-tabs
                lineColor="#5428EC"
                lineWidth="44"
                keyName="typeName"
                :activeStyle="{ color: '#5428EC' }"
                :list="seatList"
                @change="onTabChange"
            >
                <view slot="right" style="padding-left: 4px">
                    <div class="plan-view">
                        <u--image
                            :src="more"
                            mode="aspectFill"
                            width="10"
                            height="50"
                            radius="8"
                        ></u--image>
                        <div class="right" @click="showPreview">
                            <img class="icon" src="@/static/images/reserve/plan-view.png" />
                            <p>平面图</p>
                        </div>
                    </div>
                </view>
            </u-tabs>
            <img
                class="plan-image"
                @click="showPreview"
                v-if="seatList[activeIndex] && seatList[activeIndex].seatPlan"
                :src="seatList[activeIndex].seatPlan"
            />
            <!--<div class="seat-plan-container" @click="showPreview">-->
            <!--<img-->
            <!--class="plan-image"-->
            <!--v-if="seatList[activeIndex] && seatList[activeIndex].seatPlan"-->
            <!--:src="seatList[activeIndex].seatPlan"-->
            <!--/>-->
            <!--</div>-->
        </div>
        <!--<p class="seat-tips" v-if="reserveSeatTip">选座规则：{{ reserveSeatTip }}</p>-->
        <div class="seat-list" v-if="seatList[activeIndex]">
            <div
                class="seat-item"
                v-for="(item, index) in seatList[activeIndex].list"
                :key="item.id"
                :class="{ active: seatIndex === index }"
                @click="chooseSeat(item, index)"
            >
                <div class="seat-content">
                    {{ item.no }}
                </div>
                <img
                    class="sold"
                    v-if="item.status === 1"
                    :src="item.reserveUserAvatar || avatar"
                />
                <div class="seat-no">{{ item.status === 1 ? item.no : '' }}</div>
            </div>
        </div>

        <div class="footer-bar">
            <div class="status-list">
                <div class="status-item">
                    <div class="optional"></div>
                    可选座位
                </div>
                <div class="status-item">
                    <img class="sold" src="@/static/images/reserve/sold.png" />
                    已售
                </div>
                <div class="status-item">
                    <div class="selected"></div>
                    已选座位
                </div>
            </div>
            <div class="select-info">
                <div class="select-list">
                    <div class="select-main" v-if="seatIndex || seatIndex === 0">
                        已选座位 {{ seatList[activeIndex].typeName }}
                        {{ seatList[activeIndex].list[seatIndex].no }}号
                    </div>
                    <div class="select-item">
                        已选时间：{{ formatTime(startTime) }}至{{ formatTime(endTime) }}
                    </div>
                    <div class="select-item" v-if="reservedTime">已售时间：{{ reservedTime }}</div>
                </div>
                <u-button
                    color="#5428EC"
                    text="确定"
                    :disabled="reserveStatus === 1 || reserveStatus === null"
                    :customStyle="{ width: '222rpx', margin: 0 }"
                    @click="submit"
                ></u-button>
            </div>
        </div>
        <u-datetime-picker
            :key="reserveStartTime"
            :show="isShowTimePicker"
            v-model="reserveStartTime"
            mode="datetime"
            :min-date="currentDate"
            close-on-click-overlay
            @close="isShowTimePicker = false"
            @cancel="isShowTimePicker = false"
            @confirm="onStartTimeConfirm"
        ></u-datetime-picker>

        <u-modal
            ref="uModal"
            width="550rpx"
            :show="showModal"
            title="请注意"
            content="选择沉浸室座位需要额外增加费用，费用标准为40元/月、100元/季度，200元/半年，300元/年（具体收费流程会在您到达自习室现场后由管家和您对接）。"
            :closeOnClickOverlay="true"
            @confirm="confirm"
        >
            <template slot="confirmButton">
                <div class="modal-btn">
                    <u-button
                        color="#5428EC"
                        text="确定"
                        @click="showModal = false"
                        :customStyle="{ width: '100%', margin: 0 }"
                    ></u-button>
                </div>
            </template>
        </u-modal>
    </div>
</template>

<script>
import dayjs from 'dayjs';
import more from '@/static/images/reserve/more.png';
import avatar from '@/static/images/my/avatar.png';
export default {
    name: 'seat',
    components: {},
    data() {
        return {
            more,
            avatar,
            studyhallId: null,
            tabList: [],
            seatList: [],
            activeIndex: 0,
            seatId: null,
            seatIndex: null,
            usableCycleHour: 0,
            usableCycleDay: 0,
            seatTypeIds: '',
            startTime: null,
            reserveStartTime: null,
            endTime: null,
            reserveEndTime: null,
            isShowTimePicker: false,
            currentDate: Number(new Date()),
            currentNum: 1,
            seatPlanList: [],
            reserveStatus: null,
            reservedTime: null,
            showModal: false,
        };
    },
    async onLoad(options) {
        this.studyhallId = Number(options.studyhallId);
        this.seatTypeIds = options.seatTypeIds;
        this.usableCycleHour = Number(options.usableCycleHour);
        this.usableCycleDay = Number(options.usableCycleDay);
        if (options.startTime) {
            let startTime = options.startTime;
            this.startTime = startTime;
            this.reserveStartTime = new Date(startTime.replaceAll('-', '/')).getTime();
            let endTime = dayjs(startTime)
                .add(this.usableCycleDay, 'day')
                .add(this.usableCycleHour, 'hour')
                .format('YYYY-MM-DD HH:mm');
            this.endTime = endTime;
            this.reserveEndTime = new Date(endTime.replaceAll('-', '/')).getTime();
        }
        if (this.usableCycleDay * 24 + this.usableCycleHour >= 180 * 24) {
            this.getSpecialList();
        } else {
            this.getSeatList();
        }
    },
    methods: {
        formatTime(val) {
            return dayjs(val).format('MM-DD HH:mm');
        },
        getSeatList() {
            this.$Api.study.seat
                .list({
                    seatTypeIds: this.seatTypeIds,
                    reserveStartTime: this.startTime,
                    reserveEndTime: this.endTime,
                })
                .then(res => {
                    this.seatList = res;
                    this.seatPlanList = res.map(e => {
                        return e.seatPlan;
                    });
                    if (res && res.length > 0 && res[0].typeName === '沉浸区') {
                        this.showModal = true;
                    }
                });
        },
        getSpecialList() {
            this.$Api.study.reserve
                .special({
                    studyhallId: this.studyhallId,
                })
                .then(res => {
                    let seatTypeIds = this.seatTypeIds.split(',');
                    res.forEach(e => {
                        if (!(seatTypeIds || []).includes(e.id)) {
                            seatTypeIds.push(e.id);
                        }
                    });
                    this.seatTypeIds = seatTypeIds.join(',');
                    this.getSeatList();
                });
        },
        onTabChange(e) {
            this.activeIndex = e.index;
            this.seatIndex = null;
            if (e.typeName === '沉浸区') {
                this.showModal = true;
            }
        },
        onStartTimeConfirm() {
            this.isShowTimePicker = false;
            setTimeout(() => {
                let startTime = dayjs(this.reserveStartTime).format('YYYY-MM-DD HH:mm');
                this.startTime = startTime;
                let endTime = dayjs(startTime)
                    .add(this.usableCycleDay, 'day')
                    .add(this.usableCycleHour, 'hour')
                    .format('YYYY-MM-DD HH:mm');
                this.endTime = endTime;
                this.reserveEndTime = new Date(endTime.replaceAll('-', '/')).getTime();
                this.isShowTimePicker = false;
                this.reserveStatus = null;
                this.reservedTime = null;
                this.seatId = null;
                this.seatIndex = null;
                this.getSeatList();
            }, 500);
        },
        chooseSeat(item, index) {
            if (item && item.id) {
                if (this.seatId === item.id) {
                    return;
                }
                this.seatId = item.id;
                this.seatIndex = index;
            }
            this.$Api.study.seat
                .status({
                    id: this.seatId,
                    reserveStartTime: this.startTime,
                    reserveEndTime: this.endTime,
                })
                .then(res => {
                    this.reservedTime = res.reservedTime;
                    this.reserveStatus = res.status;
                });
        },
        showPreview() {
            uni.previewImage({
                current: this.activeIndex,
                urls: this.seatPlanList,
            });
        },
        submit() {
            if (this.seatIndex === null) {
                uni.showToast({
                    title: '请选择座位',
                    icon: 'none',
                });
                return false;
            }
            let seatId = this.seatList[this.activeIndex].list[this.seatIndex].id;
            let seatName =
                this.seatList[this.activeIndex].typeName +
                ' ' +
                this.seatList[this.activeIndex].list[this.seatIndex].no +
                '号';

            uni.$emit('on-seat-select', {
                seatId,
                seatName,
                startTime: this.startTime,
                reserveStartTime: this.reserveStartTime,
                endTime: this.endTime,
                reserveEndTime: this.reserveEndTime,
            });
            uni.navigateBack();
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    padding-bottom: 200rpx;
    position: relative;
    .date-time {
        width: 690rpx;
        height: 90rpx;
        margin: 20rpx auto;
        padding: 0 40rpx;
        background: #fff;
        border-radius: 24rpx;
        box-sizing: border-box;
        @include flexBox(space-between, center);
        .left {
            @include flexBox(center, center);
            .start-time {
                font-size: 28rpx;
                font-weight: 600;
                color: #2f2f2f;
                margin-right: 20rpx;
            }
        }
        .center {
            @include flexBox(center, center);
            .line {
                width: 20rpx;
                height: 2rpx;
                background: #898989;
            }
            .long {
                width: 144rpx;
                height: 52rpx;
                background: #ffffff;
                border-radius: 26rpx;
                border: 1rpx solid #e5e5e5;
                font-size: 24rpx;
                font-weight: 600;
                color: #5c5c5c;
                @include flexBox(center, center);
            }
        }
        .right {
            .end-time {
                font-size: 28rpx;
                font-weight: 600;
                color: #2f2f2f;
            }
        }
    }
    .space-list {
        margin-top: 20rpx;
        background: #fff;
        z-index: 100;
        position: sticky;
        top: 88rpx;
        .plan-view {
            font-size: 24rpx;
            color: #5428ec;
            @include flexBox(center, center);
            .right {
                padding: 10rpx;
                @include flexBox(center, center, column);
                .icon {
                    width: 32rpx;
                    height: 32rpx;
                }
            }
        }
        .plan-image {
            width: 100%;
            /*height: 443rpx;*/
        }
        /*.seat-plan-container {*/
        /*width: 750rpx;*/
        /*height: 443rpx;*/
        /*overflow: auto;*/
        /*.plan-image {*/
        /*width: 300%;*/
        /*height: 300%;*/
        /*}*/
        /*}*/
    }
    .seat-tips {
        color: #fa6400;
        font-size: 26rpx;
        padding: 30rpx 30rpx 0 30rpx;
    }
    .seat-list {
        padding: 38rpx 30rpx;
        width: 100%;
        @include flexBox(flex-start, flex-start, row, wrap);
        .seat-item {
            margin-right: 42rpx;
            position: relative;
            .seat-content {
                width: 80rpx;
                height: 80rpx;
                background: #d8d8d8;
                border-radius: 8rpx;
                border: 1rpx solid #e5e5e5;
                box-sizing: border-box;
                transition: 0.5s;
                color: #5c5c5c;
                font-size: 24rpx;
                @include flexBox(center, center);
            }
            &:nth-child(6n) {
                margin-right: 0;
            }
            &.active {
                .seat-content {
                    background: #5428ec;
                    color: #fff;
                }
            }
            .sold {
                width: 80rpx;
                height: 80rpx;
                position: absolute;
                left: 0;
                top: 0;
                border-radius: 8rpx;
            }
            .seat-no {
                height: 40rpx;
                line-height: 40rpx;
                text-align: center;
                font-size: 20rpx;
                color: #5c5c5c;
            }
        }
    }
    .footer-bar {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        background: #fff;
        .status-list {
            padding: 14rpx 34rpx;
            border-bottom: 1rpx solid #f1f1f1;
            @include flexBox(space-between, center);
            .status-item {
                font-size: 24rpx;
                color: #5c5c5c;
                @include flexBox(flex-start, center);
                .optional {
                    width: 32rpx;
                    height: 32rpx;
                    background: #d8d8d8;
                    border-radius: 8rpx;
                    margin-right: 12rpx;
                }
                .sold {
                    width: 32rpx;
                    height: 32rpx;
                    margin-right: 12rpx;
                }
                .selected {
                    width: 32rpx;
                    height: 32rpx;
                    background: #5428ec;
                    border-radius: 8rpx;
                    border: 1rpx solid #e5e5e5;
                    margin-right: 12rpx;
                }
            }
        }
        .select-info {
            width: 100%;
            padding: 0 30rpx;
            box-sizing: border-box;
            height: 140rpx;
            @include flexBox(space-between, center);
            .select-list {
                @include flexBox(flex-start, flex-start, column);
                .select-main {
                    font-size: 28rpx;
                    font-weight: 600;
                    color: #2f2f2f;
                    margin-bottom: 6rpx;
                }
                .select-item {
                    font-size: 24rpx;
                    color: #5c5c5c;
                }
            }
        }
    }
}
.preview-popup {
    width: 750rpx;
    .indicator-num {
        padding: 4rpx 0;
        background-color: rgba(0, 0, 0, 0.35);
        border-radius: 50rpx;
        width: 70rpx;
        @include flexBox(center, center);
        .indicator-text {
            color: #ffffff;
            font-size: 24rpx;
        }
    }
}
.modal-btn {
    padding: 20rpx;
    border-top: 1rpx solid #e5e5e5;
}
::v-deep .u-popup {
    .uicon-close {
        color: #fff !important;
    }
}
::v-deep .u-modal {
    .u-modal__content {
        padding-left: 34rpx;
        padding-right: 34rpx;
    }
    .u-modal__button-group--confirm-button {
        padding: 0;
    }
}
</style>
